<template>
	<view class="container">
		<uni-forms ref="formData" :rules="rules" :model="formData">
			<uni-forms-item label="手机号" name="phone">
				<uni-easyinput v-model="formData.phone" placeholder="请输入手机号">
					<template #right>
						<text @click="getCode" style="margin-right: 24rpx;">获取验证码</text>
					</template>
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="验证码" name="code">
				<uni-easyinput v-model="formData.code" placeholder="请输入验证码" />
			</uni-forms-item>
			<button type="primary" @click="submit('formData')">提交</button>
		</uni-forms>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {},
				mobilePartten: /^1[34578]\d{9}$/,
				rules: {
					code: {
						rules: [{
							required: true,
							errorMessage: '验证码不能为空'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}]
					},
				}
			}
		},
		methods: {
			getCode() {
				if (this.mobilePartten.test(this.formData.phone)) {
					uni.showToast({
						title: '请求已发送',
						icon: 'success',
						duration: 2000
					})
					// 接收系统发送的验证码
				} else {
					uni.showToast({
						title: '手机号格式错误',
						icon: 'error',
						duration: 2000
					})
				}
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					//发送请求 比较验证码
					console.log('success', res);
					uni.showToast({
						title: '绑定成功',
						icon: 'success',
						duration: 1000
					})
					setTimeout(() => {
						uni.redirectTo({
							// 表单填写成功返回某页面
							url: '/pages/test/test'
						})
					}, 2000)
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 40rpx 40rpx 0;
	}
</style>